/*
 * @Title: 旅游宾馆-相册组件
 * @Created by: ycq 
 */
<template>
	<view class="photo-list">
		<view class="photo-item" v-for="(item,index) in photoConfig.photoData" :key='index' @click="nextLevel(index,item.img)">
			<image :src="item.img" mode="" @tap="showBig(item.img)"></image>
			<view class="photo-title" :class="photoConfig.photoType == 2 ? 'no-bg':''">
				<text>{{item.title}} <text v-if="photoConfig.photoType == 1">({{item.num}})</text></text>
			</view>
			
			<!-- 显示大图 -->
			<view class="bigPhoto" v-if="showBigPhoto">
				<image 
				:src="bigImg"
				 mode="aspectFit"
				  @touchstart="showDeleteButton" 
				  @touchend="emptyTime"></image>
				  <view class="bigText">
					  <text>{{item.title}}</text>
					  <text>3/7</text>
				  </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		name: 'Photo',
		props:['photoConfig','showBigPhoto','bigImg'],
		data(){
			return{
				// bigImg:'',
				 // showBigPhoto:false,
                Loop:null,
			}
		},
		methods:{
			showDeleteButton:function (e) {
			    clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
			    this.Loop = setTimeout(function() {
			        console.log("长按了");
					uni.showActionSheet({
						title:'',
						itemList: ['分享', '保存到相册','取消'],
						success: (e) => {
							console.log(e.tapIndex);
						}
					})
			    }.bind(this), 1000);
			
			},
			emptyTime:function () {
			    clearTimeout(this.Loop); //清空定时器，防止重复注册定时器
			},
			nextLevel(index,itemImg){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.change(index,itemImg);
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.change(index,itemImg);
					//#endif
				// this.emit('sendPhoteTit',item[index].title)
			},
			//显示大图
			showBig(url){
				console.log(2222);
				// #ifdef APP-PLUS||MP-WEIXIN
				this.$parent.change(url)
				//#endif
				
				//#ifndef APP-PLUS||MP-WEIXIN
				this.$parent.$parent.change(url)
				//#endif 
				// this.bigImg = url
				// this.showBigPhoto = true
			},
			
		}
	}
</script>

<style scoped>
	.photo-list{
		width: 694upx;
		margin-left: 28upx;
		margin-right: 28upx;
		margin-top: 110upx;
	}
	.photo-item{
		width: 334upx;
		margin-top: 30upx;
		height: 238upx;
		position: relative;
	}
	.photo-item image{
		width: 334upx;
		height: 238upx;
		border-radius: 10upx;
	}
	.photo-item:nth-child(odd){
		float: left;
	}
	.photo-item:nth-child(even){
		float: right;
	}
	.photo-title{
		width: 334upx;
		height: 63upx;
		bottom: 0;
		position: absolute;
		border-radius: 0 0 10upx 10upx;
		background: rgba(0,0,0,0.5);
	}
	.no-bg{
		background:none;
	}
	.photo-title text{
		color: #FFFFFF;
		font-size: 30upx;
		margin-left: 20upx;
		height: 63upx;
		line-height: 63upx;
	}
	.bigPhoto{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1099;
		background: rgba(0,0,0,1);
	}
	.bigPhoto image{
		width: 100%;
		height: 100vh;
	}
	.bigText{
		position: absolute;
		bottom:72upx;
		width:100%;
		left: 0;
		z-index: 9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding:0 34upx;
		box-sizing: border-box;
	}
	.bigText text{
		color: #ffffff;
		font-size: 28upx;
	}
</style>
